<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>会员注册页面 </title>
    <script type="text/javascript">
        function msg(){
            alert("用户名检测完成");
        }
    </script>
     
    <style type="text/css">
       
        /*设置表头，表体，表单第一行背景颜色*/
        .nav{
            background:#00FFFF;
            height:30px;
            
        }
        
        /*设置表头，表头，表单具体内容背景颜色*/
        .info{  
            background: #7fffd4;
        }
        /*重要信息标记为红色*/
        .importInfo{
            color: red;
        }

        .button{
            background: #7fff00;
        }


    </style>
</head>
<body>
    <form action="a.html" method="post" >
    <!-- align控制表格的对齐方式:在页面上中间对齐；cellpadding控制行中文字在表格中和表格上下边框的距离，cellpadding控制单元格之间的空白-->
    <table align="center" cellpadding="10" cellspacing="0"><!--表格-->
        <thead><!-- 表头   -->
            <tr class="nav"><!--tr行 -->
                <th colspan="3" align="left">1.会员登录名和密码</th><!-- th定义表头合并2列，左对齐 -->
            </tr>

            <tr class="info">
                <!-- 右对齐-->
                <td align="right" >
                    账号：            
                </td>
                <td  class="importInfo">
                    <input type="text" name="user"> *
                </td>
                <td align="lfet"><input type="button" value="账号检测" onclick="msg()"/>5-15位，请使用英文(a-z、A-Z)、数字(0-9)</td>

              
            </tr>

            <tr class="info">
                <td align="right" >
                    密码:            
                </td>
                <td  class="importInfo">
                    <input type="password" name="upass"> *
                </td>
                <td align="left">5-15位，请使用英文(a-z)、数字(0-9)注意区分大小写：<br>
                    密码不能与登录名相同</td>
              
            </tr>

             <tr class="info">
                <td align="right">
                    重复密码:            
                </td>
                <td  class="importInfo">
                    <input type="password"  name="upass"> *
                </td>
                <td align="left">两次密码必须一致
                </td>
              
            </tr>
        </thead>

        <tbody>
            <tr class="nav">
                <th colspan="3" align="left">2.基本信息和联系方式</th>
            </tr>

             <tr class="info">
                <!-- 右对齐-->
                <td align="right">
                    真实姓名：            
                </td>
                <td  class="importInfo">
                    <input type="text" name="uname" placeholder="请输入姓名"> *
                </td>
                <td>
                    <input type="radio" name="sex" checked value="1"/>男
                     <input type="radio" name="sex" value="0"/>女<br/>
                </td>
              
            </tr>

             <tr class="info">
                <td align="right">
                    生日:            
                </td>
                <td  class="importInfo">
                    <input type="date" name="ubrithday"/>*
                </td>
                <td>
                </td>
            </tr>
            
            <tr class="info">
                <td align="right">
                    学历:            
                </td>
                <td  class="importInfo" >
                   <select name="eucationbg">
                        <option value="1">小学</option>
                        <option value="2">中学</option>
                        <option value="3">大专</option>
                        <option value="4" selected>本科</option>
                        <option value="5">研究生</option>
                     </select>*
                </td>
                <td>
                </td>

            </tr>


            <tr class="info">
                 <td align="right">
                    电子邮箱:            
                </td>
                <td  class="importInfo">
                    <input type="text"  name="uemail"> *
                </td>
                <td>可以输入QQ邮箱、网易邮箱等正确邮箱格式
                </td>
            </tr>

             <tr class="info">
                 <td align="right" >
                    电话:            
                </td>
                <td  class="importInfo">
                    <input type="text" name="uphonenum"> *
                </td>
                <td>请输入11位电话号码 
                </td>
            </tr>
            

        </tbody>

        <tfoot >
             <tr class="nav">
                <th colspan="3" align="left">3.附加信息</th>
            </tr>

            <tr class="info">
                <td align="right" >
                    现居住地址(省):
                </td>
                <td colspan="2">
                    <input type="text" name="uprovice">
                </td>
            </tr>

            <tr class="info">
                <td align="right" >
                    现居住地址(市):
                </td>
                <td colspan="2">
                    <input type="text" name="ucity">
                </td>
            </tr>

            <tr class="info">
                <td align="right" >
                    现居住地址(区):
                </td>
                <td colspan="2">
                    <input type="text" name="uarea">
                </td>
            </tr>

            <tr class="info">
                <td align="right" >
                    现居住地址(街道):
                </td>
                <td colspan="2">
                    <input type="text" name="ustreet">
                </td>
            </tr>

            
             <tr class="info">
                <td align="right" >
                    个人简介:
                </td>
                <td colspan="2">
                    <textarea  rows=5 cols=50 name="uinfodecribe"></textarea>
                </td>
            </tr>


             <tr class="button">
                <td >
                    <input type="reset" value="重置">
                </td>

                 <td colspan="2">
                    <input type="submit" value="提交">
                </td>
            </tr>

        </tfoot>
    </table>
    </form>
</body>

</html>
